<template>
	<!-- <view class="container" :style="{paddingTop:tH}">
		<view class="headerTit" :style="{height:tH,paddingTop:pT}">
			泗河基地
		</view> -->
	<sys-container :label="'答题卡'" showBack withoutTop="true">
		<template v-slot:content>
			<view class="warp">
				<view class="staticForTest">
					<view class="singleSta">
						<view class="staVal">
							{{allTest}}
						</view>
						<view class="staTit">
							题目数量
						</view>
					</view>
					
					<view class="singleSta">
						<view class="staVal">
							{{dontDo}}
						</view>
						<view class="staTit">
							未作答数
						</view>
					</view>
					<view class="singleSta">
						<view class="staVal">
							{{leftTime}}
						</view>
						<view class="staTit">
							剩余时间
						</view>
					</view>
				</view>
				<view class="answerRes">
					<view class="answerTit">
						<text>答题情况</text>
						<view class="legend">
							<view class="singleLeg" v-if="params.type==2">
								<view class="cir gre"></view>
								<text>已答</text>
							</view>
							<template v-else>
								<view class="singleLeg">
									<view class="cir gre"></view>
									<text>正确</text>
								</view>
								<view class="singleLeg">
									<view class="cir red"></view>
									<text>错误</text>
								</view>
							</template>
							
							<view class="singleLeg">
								<view class="cir"></view>
								<text>未答</text>
							</view>
							
						</view>
					</view>
				
					<view class="answerMain" >
						<template v-if="params.type==1">
							<view class="singleTask" v-for="(item,index) in testList" :key="index" :class="item.userAnswer&&item.userAnswer.is_correct?item.userAnswer.is_correct==2?'beDo':'error':''"  @tap="goToSeeTask(index)">
								{{index+1}}
							</view>
						</template>
						<template v-else>
							<view class="singleTask" v-for="(item,index) in testList" :key="index" :class="item.userAnswer&&item.userAnswer.is_correct?'beDo':''" @tap="goToSeeTask(index)">
								{{index+1}}
							</view>
						</template>
						
					</view>
				
					<view class="btnArea" style="text-align: center;line-height: 80rpx;color:#fff" @tap="handleTest">
						交卷
					</view>
				</view>
			</view>
		</template>
		
	</sys-container>

	<!-- </view> -->
</template>

<script>
	import {answerSheet,submitTestPaper } from '@/globalApi/requestApi.js'
	export default {
		components: {

			// sysContainer
		},
		data() {
			return {
				params:{
					type:1,
				},
				testList:[],
				allTest:0,
				dontDo:0,
				allStartTime:'',
				leftTime:'00:00:00',
				testTimeHour:0,
				timer:null,
			}
		},
		onLoad(options) {
			this.testTimeHour = options.testTimeHour
			this.params= {
				test_id:options.testId,
				type:options.type,
				record_id:options.recordId,
				start_time:options.allStartTime
			}
			// this.allStartTime = options.allStartTime
			this.getTest()
		},
		onShow(){
			let that = this
			// clearInterval(that.timer)
			// this.timer = null
			if(!this.timer){
				this.timer = setInterval(function(){
						that.testTimeHour -= 1000
						if(that.testTimeHour>=1000){
							that.leftTime = that.timeLeftFun()
						}else{
							clearInterval(that.timer)
							that.timer = null
						}
					},1000)
			}
			
		},
		beforeDestroy() {
			// clearInterval(this.timer)
			// this.timer = null
		},
		methods: {
			timeLeftFun(){
				var h = Math.floor(this.testTimeHour/(1000*60*60)%24).toString().padStart(2,'0'),  //计算小时数
				        m= Math.floor(this.testTimeHour/(1000*60)%60).toString().padStart(2,'0'),  //计算分钟数
				        s= Math.floor(this.testTimeHour/1000%60).toString().padStart(2,'0'); 
						return h+':'+m+':'+s
				
				
				
			},
			getTest(){
				answerSheet(this.params).then(res=>{
					if(res.code==200){
						uni.hideLoading()
						this.testList = res.data
						this.allTest = this.testList.length
						var dontDoList = this.testList.filter(item=>{
							
							if(!item.userAnswer.is_correct){
								return item
							} 
						})
						console.log(dontDoList)
						this.dontDo = dontDoList.length
					}
				})
			},
			goToSeeTask(idx){
				let pages = getCurrentPages() 
									     
									     // 2. 上一页面实例
									     	// 注意是length长度，所以要想得到上一页面的实例需要 -2
									     	// 若要返回上上页面的实例就 -3，以此类推
				let prevPage = pages[pages.length -2] 
				 
				// 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
				prevPage.$vm.getTask(idx) 
			
				uni.navigateBack()
			},
			handleTest(){
				var obj = {
					end_time: Date.parse(new Date())/1000,
					start_time:this.params.start_time,
					duration : Date.parse(new Date())/1000 - this.params.start_time,
					examination_id : this.params.record_id
				}
				
				submitTestPaper(obj).then(res=>{
					if(res.code==200){
						uni.navigateTo({
							url:'../testResult/testResult?recordId='+this.params.record_id+'&type='+this.params.type
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {}

	.warp {
		height: 100%;
		width: 100%;
		background: #f8f8f8;
		overflow: auto;
		padding:35rpx 30rpx;
		box-sizing: border-box;
		padding-bottom: 80rpx;
		.staticForTest{
			padding:70rpx 50rpx;
			box-sizing: border-box;
			display: flex;
			width: 100%;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			border-radius: 8rpx;
			.singleSta{
				color: #222222;
				.staTit{
					margin-top:40rpx;
					text-align: center;
					font-size: 24rpx;
				}
				.staVal{
					text-align: center;
					font-size: 36rpx;
					font-weight: bold;
				}
			}
			
		}
		.answerRes{
			padding:70rpx 50rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 8rpx;
			.answerTit{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 22rpx;
				font-weight: bold;
				color: #222222;
				.legend{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					.singleLeg{
						display: flex;
						align-items: center;
						margin-left:20rpx;
						.cir{
							width:22rpx;
							height:22rpx;
							border:1rpx solid #969696;
							border-radius: 50%;
							margin-right:10rpx;
						}
						.gre{
							background:#1EB93B
						}
						.red{
							background:#D7201D
						}
					}
				}
			}
		
			.answerMain{
				padding:45rpx 35rpx;
				box-sizing: border-box;
				display:grid;
				grid-template-columns: repeat(5,auto);
				.singleTask{
					width:80rpx;
					height:80rpx;
					text-align: center;
					line-height: 80rpx;
					border:1rpx solid #888888;
					border-radius: 50%;
					margin-bottom: 25rpx;
				}
				.success{
					background:#1EB93B;
					color:#fff;
				}
				.mistake{
					background:#D7201D  ;
					color:#fff;
				}
			}
		}
	
		.beDo{
			background: #1EB93B;
			color:#fff;
		}
		.error{
			background: red;
			color:#fff;
		}
		.btnArea{
			width:100%;
			height:80rpx;
			background: #D7201D;
			position: fixed;
			bottom:0;
			left: 0;
		}
	}
</style>